Hello fellow friends I am trying to create my own app but facing issues after updating the react-router-dom to 6.02 I am getting this error
Error: [Home] is not a Route component. All component children of Routes must be a Route or <React.Fragment>
the code is the following
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar/Navbar";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Signup from "./pages/signup/Signup";
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
<Route exact path="/">
<Home />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/signup">
<Signup />
</Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
<Route path="/" element={<Home />} />
React router package has some sort of code changes with respect to the versions.
// React router v4 or v5
<Route path="/" component={Home} />
// React router v5.1
<Route exact path="/">
<Home />
</Route>
// React router v6
<Route path="/" element={<Home />} />
For more: React Router - Upgrading to V6
So, you can use V6 syntax to resolve this issue.
This error happens because of the new Upgrade of the react-router-dom library.
This is the solution to your problem.
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route exact path='/' element={<Home />} />
<Route path='/register' element={<Signup />} />
<Route path='/Login' element={<Login />} />
</Routes>
</Router>
</div>
);
}
export default App;
This is the solution for this version "react-router-dom": "^6.0.2",
Note:- There are some more features than this in the new version of react-router-dom.
https://reactrouter.com/docs/en/v6